<template>
  <div class="search-box">
    <!-- 搜索 -->
    <div class="search-hander">
      <div class="search-hander-state">说明: 目前支持学科和关键字条件筛选</div>
      <div>
        <el-button
          type="danger"
          size="small"
          @click.native="$emit('export_excel')"
          >excel导出</el-button
        >
        <el-button
          size="small"
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
    </div>
    <div>
      <el-form :model="from" ref="from" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 100%"
                v-model="from.subjectID"
                @change="subjectChange"
              >
                <el-option
                  v-for="item in subjectDate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width: 100%" v-model="from.catalogID">
                <el-option
                  v-for="item in directorysList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select style="width: 100%" v-model="from.tags">
                <el-option
                  v-for="item in tagsSimpleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                style="width: 100%"
                placeholder="根据题干搜索"
                v-model.trim="from.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select style="width: 100%" v-model="from.questionType">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select style="width: 100%" v-model="from.difficulty">
                <el-option
                  v-for="item in Hard"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width: 100%" v-model="from.direction">
                <el-option
                  v-for="item in orientation"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select style="width: 100%" v-model="from.creatorID">
                <el-option
                  v-for="item in usersimpleDate"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                style="width: 100%"
                v-model.trim="from.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                style="width: 100%"
                v-model.trim="from.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                placeholder="请选择"
                v-model="from.province"
                @change="handleProvince"
                style="width: 48%; margin-right: 2%"
                filterable
              >
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                v-model="from.city"
                style="width: 50%"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="el-from-sousuo" style="text-align: right">
              <el-button size="small" @click="clearFrom">清除</el-button>
              <el-button size="small" type="primary" @click="searchFrom"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as tagsSimple } from '@/api/hmmm/tags' // 标签
import { simple as directorysSimple } from '@/api/hmmm/directorys' // 二级目录
import { simple as usersimple } from '@/api/base/users' // 录入人
export default {
  name: 'searchModule',
  props: {
    subjectDate: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []
      }, // 省市
      questionType: [
        { label: '单选', value: 1 },
        { label: '多选', value: 2 },
        { label: '简答', value: 3 }
      ], // 试题类型
      Hard: [
        { label: '简单', value: 1 },
        { label: '一般', value: 2 },
        { label: '困难', value: 3 }
      ], // 难度
      orientation: [
        //  o2o，外包服务，企业服务，互联网金融，企业咨询，互联网，电子商务，其他
        { label: 'o2o' },
        { label: '外包服务' },
        { label: '企业服务' },
        { label: '互联网金融' },
        { label: '企业咨询' },
        { label: '互联网' },
        { label: '电子商务' },
        { label: '其他' }
      ], // 方向
      tagsSimpleList: [], // 标签
      directorysList: [], // 二级目录
      usersimpleDate: [], // 录入人
      from: {
        page: 1,
        pagesize: 5
      }
    }
  },
  async created () {
    const { data } = await usersimple()
    this.usersimpleDate = data
    this.getCityData()
  },
  methods: {
    async subjectChange (val) {
      if (val === '') return
      const { data } = await directorysSimple({ subjectID: val })
      this.directorysList = data
      const { data: res } = await tagsSimple({ subjectID: val })
      this.tagsSimpleList = res
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
    },
    // 清除表单
    clearFrom () {
      this.from = {}
    },
    // 搜索
    searchFrom () {
      this.from.page = 1
      this.$emit('searchFrom', this.from)
    }
  }
}
</script>

<style  lang="scss" scoped>
.search-box {
  padding: 20px;
  background-color: #fff;
  .search-hander {
    height: 50px;
    display: flex;
    justify-content: space-between;
    .search-hander-state {
      font-size: 12px;
      color: pink;
    }
  }
  .filter-container {
    display: flex;
    justify-content: space-between;
    ::v-deep .el-form-item--medium {
      margin-bottom: 0;
    }
    .el-from-sousuo {
      // margin-left: 144px;
    }
  }
}
</style>
